

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/fluid.png">
  <link rel="icon" href="/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="深海火锅店">
  <meta name="keywords" content="">
  
    <meta name="description" content="vue3 &amp; typescript学习 学习文档 我这个已经安装过Element-plus了  初识语法类型注解12345678910111213141516171819202122232425262728293031323334&lt;template&gt;    &lt;div&gt;        &lt;h3&gt;&amp;#123;&amp;#123;user.name&amp;#125;&amp;#125">
<meta property="og:type" content="article">
<meta property="og:title" content="vue3 &amp; typescript学习">
<meta property="og:url" content="http://example.com/2023/04/30/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/Vue/Vue3/Vue3+Typescript/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="vue3 &amp; typescript学习 学习文档 我这个已经安装过Element-plus了  初识语法类型注解12345678910111213141516171819202122232425262728293031323334&lt;template&gt;    &lt;div&gt;        &lt;h3&gt;&amp;#123;&amp;#123;user.name&amp;#125;&amp;#125">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-04-30T03:00:00.000Z">
<meta property="article:modified_time" content="2023-07-13T15:18:27.250Z">
<meta property="article:author" content="深海火锅店">
<meta property="article:tag" content="vue3">
<meta name="twitter:card" content="summary_large_image">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>vue3 &amp; typescript学习 - Hexo</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.9.3","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>Fluid</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/background.jpg') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="vue3 &amp; typescript学习"></span>
          
        </div>

        
          
  <div class="mt-3">
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2023-04-30 11:00" pubdate>
          2023年4月30日 上午
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          21k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          179 分钟
        
      </span>
    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">vue3 &amp; typescript学习</h1>
            
            
              <div class="markdown-body">
                
                <h1 id="vue3-amp-typescript学习"><a href="#vue3-amp-typescript学习" class="headerlink" title="vue3 &amp; typescript学习"></a>vue3 &amp; typescript学习</h1><blockquote>
<p><a target="_blank" rel="noopener" href="https://24kcs.github.io/vue3_study">学习文档</a></p>
<p>我这个已经安装过Element-plus了</p>
</blockquote>
<h2 id="初识语法"><a href="#初识语法" class="headerlink" title="初识语法"></a>初识语法</h2><h3 id="类型注解"><a href="#类型注解" class="headerlink" title="类型注解"></a>类型注解</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>    &lt;div&gt;<br>        &lt;h3&gt;&#123;&#123;user.name&#125;&#125;&lt;/h3&gt;<br>        &lt;hr&gt;<br>        &lt;el-button type=&quot;info&quot; icon=&quot;Message&quot; circle @click=&quot;testGreeter&quot;/&gt;<br>    &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>    import &#123;defineComponent, reactive&#125; from &#x27;vue&#x27;;<br><br>    export default defineComponent(&#123;<br>        name: &#x27;&#x27;,<br>        setup() &#123;<br>            // 1.类型注解<br>            const greeter = (person: string) =&gt; &#123;<br>                return &#x27;Hello,&#x27; + person<br>            &#125;<br><br>            const user = reactive(&#123;<br>                name: &quot;张三&quot;,<br>                age: 25<br>            &#125;);<br><br>            function testGreeter() &#123;<br>                user.name = greeter(user.name);<br>            &#125;<br><br>            return &#123;<br>                testGreeter,<br>                user<br>            &#125;<br>        &#125;<br>    &#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h3 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>    &lt;div&gt;<br>        &lt;el-input v-model=&quot;input&quot; placeholder=&quot;Please input&quot;/&gt;<br>        &lt;hr&gt;<br>        &lt;el-button type=&quot;info&quot; icon=&quot;Message&quot; circle @click=&quot;testGreeter&quot;/&gt;<br>    &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>    import &#123;defineComponent, reactive, ref&#125; from &#x27;vue&#x27;;<br><br>    // 2.接口<br>    interface UserInfo &#123;<br>        firstName: string;<br>        lastName: string;<br>    &#125;<br><br>    export default defineComponent(&#123;<br>        name: &#x27;&#x27;,<br>        setup() &#123;<br>            const greeter = (user: UserInfo) =&gt; &#123;<br>                return &#x27;Hello,&#x27; + user.firstName + &#x27;_&#x27; + user.lastName<br>            &#125;<br><br>            const user = reactive(&#123;<br>                firstName: &quot;南宫&quot;,<br>                lastName: &quot;问天&quot;<br>            &#125;);<br><br>            let input = ref();<br><br>            function testGreeter() &#123;<br>                input.value = greeter(user);<br>            &#125;<br><br>            return &#123;<br>                testGreeter,<br>                input<br>            &#125;<br>        &#125;<br>    &#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h3 id="类"><a href="#类" class="headerlink" title="类"></a>类</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>    &lt;div&gt;<br>        &lt;el-input v-model=&quot;input&quot; placeholder=&quot;Please input&quot;/&gt;<br>        &lt;hr&gt;<br>        &lt;el-button type=&quot;info&quot; icon=&quot;Message&quot; circle @click=&quot;testGreeter&quot;/&gt;<br>    &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>    import &#123;defineComponent, reactive, ref&#125; from &#x27;vue&#x27;;<br><br>    // 3.类<br>    class User &#123;<br>        fullName: string;<br>        firstName: string;<br>        lastName: string;<br><br>        constructor(firstName: string, lastName: string) &#123;<br>            this.firstName = firstName;<br>            this.lastName = lastName;<br>            this.fullName = firstName + &#x27;_&#x27; + lastName;<br>        &#125;<br>    &#125;<br><br>    interface UserInfo &#123;<br>        firstName: string;<br>        lastName: string;<br>    &#125;<br><br>    export default defineComponent(&#123;<br>        name: &#x27;&#x27;,<br>        setup() &#123;<br>            const greeter = (user: UserInfo) =&gt; &#123;<br>                return &#x27;Hello,&#x27; + user.firstName + &#x27;_&#x27; + user.lastName<br>            &#125;<br><br>            const obj = new User(&#x27;南宫&#x27;, &#x27;问天&#x27;);<br>            const user = reactive(obj);<br><br>            let input = ref();<br><br>            function testGreeter() &#123;<br>                input.value = greeter(user);<br>            &#125;<br><br>            return &#123;<br>                testGreeter,<br>                input<br>            &#125;<br>        &#125;<br>    &#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h2 id="常用语法"><a href="#常用语法" class="headerlink" title="常用语法"></a>常用语法</h2><blockquote>
<p><a target="_blank" rel="noopener" href="https://24kcs.github.io/vue3_study/chapter2/1_type.html#%E5%B8%83%E5%B0%94%E5%80%BC">查看原文档</a></p>
</blockquote>
<h3 id="基础类型"><a href="#基础类型" class="headerlink" title="基础类型"></a>基础类型</h3><h4 id="布尔值"><a href="#布尔值" class="headerlink" title="布尔值"></a>布尔值</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">isDone</span>: <span class="hljs-built_in">boolean</span> = <span class="hljs-literal">false</span>;<br>isDone = <span class="hljs-literal">true</span>;<br><span class="hljs-comment">// isDone = 2 // error</span><br></code></pre></td></tr></table></figure>



<h4 id="数字"><a href="#数字" class="headerlink" title="数字"></a>数字</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">a1</span>: <span class="hljs-built_in">number</span> = <span class="hljs-number">10</span> <span class="hljs-comment">// 十进制</span><br><span class="hljs-keyword">let</span> <span class="hljs-attr">a2</span>: <span class="hljs-built_in">number</span> = <span class="hljs-number">0b1010</span>  <span class="hljs-comment">// 二进制</span><br><span class="hljs-keyword">let</span> <span class="hljs-attr">a3</span>: <span class="hljs-built_in">number</span> = <span class="hljs-number">0o12</span> <span class="hljs-comment">// 八进制</span><br><span class="hljs-keyword">let</span> <span class="hljs-attr">a4</span>: <span class="hljs-built_in">number</span> = <span class="hljs-number">0xa</span> <span class="hljs-comment">// 十六进制</span><br></code></pre></td></tr></table></figure>

<h4 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">name</span>:<span class="hljs-built_in">string</span> = <span class="hljs-string">&#x27;tom&#x27;</span><br>name = <span class="hljs-string">&#x27;jack&#x27;</span><br><span class="hljs-comment">// name = 12 // error</span><br><span class="hljs-keyword">let</span> <span class="hljs-attr">age</span>:<span class="hljs-built_in">number</span> = <span class="hljs-number">12</span><br><span class="hljs-keyword">const</span> info = <span class="hljs-string">`My name is <span class="hljs-subst">$&#123;name&#125;</span>, I am <span class="hljs-subst">$&#123;age&#125;</span> years old!`</span><br></code></pre></td></tr></table></figure>

<h4 id="undefined-amp-null"><a href="#undefined-amp-null" class="headerlink" title="undefined &amp; null"></a>undefined &amp; null</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">u</span>: <span class="hljs-literal">undefined</span> = <span class="hljs-literal">undefined</span><br><span class="hljs-keyword">let</span> <span class="hljs-attr">n</span>: <span class="hljs-literal">null</span> = <span class="hljs-literal">null</span><br></code></pre></td></tr></table></figure>

<h4 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">list1</span>: <span class="hljs-built_in">number</span>[] = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]<br></code></pre></td></tr></table></figure>

<p><strong>数组泛型</strong></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">list2</span>: <span class="hljs-title class_">Array</span>&lt;<span class="hljs-built_in">number</span>&gt; = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]<br></code></pre></td></tr></table></figure>

<h4 id="元组-tuple"><a href="#元组-tuple" class="headerlink" title="元组 tuple"></a>元组 tuple</h4><p>元组类型允许表示一个已知元素数量和类型的数组，<code>各元素的类型不必相同</code>。 比如，你可以定义一对值分别为 <code>string</code> 和 <code>number</code> 类型的元组。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">t1</span>: [<span class="hljs-built_in">string</span>, <span class="hljs-built_in">number</span>]<br>t1 = [<span class="hljs-string">&#x27;hello&#x27;</span>, <span class="hljs-number">10</span>] <span class="hljs-comment">// OK</span><br>t1 = [<span class="hljs-number">10</span>, <span class="hljs-string">&#x27;hello&#x27;</span>] <span class="hljs-comment">// Error</span><br></code></pre></td></tr></table></figure>

<h4 id="枚举"><a href="#枚举" class="headerlink" title="枚举"></a>枚举</h4><p><code>enum</code> 类型是对 JavaScript 标准数据类型的一个补充。 使用枚举类型可以<code>为一组数值赋予友好的名字</code>。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">enum</span> <span class="hljs-title class_">Color</span> &#123;<br>  <span class="hljs-title class_">Red</span>,<br>  <span class="hljs-title class_">Green</span>,<br>  <span class="hljs-title class_">Blue</span><br>&#125;<br><br><span class="hljs-comment">// 枚举数值默认从0开始依次递增</span><br><span class="hljs-comment">// 根据特定的名称得到对应的枚举数值</span><br><span class="hljs-keyword">let</span> <span class="hljs-attr">myColor</span>: <span class="hljs-title class_">Color</span> = <span class="hljs-title class_">Color</span>.<span class="hljs-property">Green</span>  <span class="hljs-comment">// 0</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(myColor, <span class="hljs-title class_">Color</span>.<span class="hljs-property">Red</span>, <span class="hljs-title class_">Color</span>.<span class="hljs-property">Blue</span>)<br><span class="hljs-comment">// 输出:1 0 2</span><br></code></pre></td></tr></table></figure>

<p>默认情况下，从 <code>0</code> 开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 <code>1</code> 开始编号：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">enum</span> <span class="hljs-title class_">Color</span> &#123;<span class="hljs-title class_">Red</span> = <span class="hljs-number">1</span>, <span class="hljs-title class_">Green</span>, <span class="hljs-title class_">Blue</span>&#125;<br><span class="hljs-keyword">let</span> <span class="hljs-attr">c</span>: <span class="hljs-title class_">Color</span> = <span class="hljs-title class_">Color</span>.<span class="hljs-property">Green</span><br></code></pre></td></tr></table></figure>

<p>或者，全部都采用手动赋值：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">enum</span> <span class="hljs-title class_">Color</span> &#123;<span class="hljs-title class_">Red</span> = <span class="hljs-number">1</span>, <span class="hljs-title class_">Green</span> = <span class="hljs-number">2</span>, <span class="hljs-title class_">Blue</span> = <span class="hljs-number">4</span>&#125;<br><span class="hljs-keyword">let</span> <span class="hljs-attr">c</span>: <span class="hljs-title class_">Color</span> = <span class="hljs-title class_">Color</span>.<span class="hljs-property">Green</span><br></code></pre></td></tr></table></figure>

<p>枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">enum</span> <span class="hljs-title class_">Color</span> &#123;<span class="hljs-title class_">Red</span> = <span class="hljs-number">1</span>, <span class="hljs-title class_">Green</span>, <span class="hljs-title class_">Blue</span>&#125;<br><span class="hljs-keyword">let</span> <span class="hljs-attr">colorName</span>: <span class="hljs-built_in">string</span> = <span class="hljs-title class_">Color</span>[<span class="hljs-number">2</span>]<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(colorName)  <span class="hljs-comment">// &#x27;Green&#x27;</span><br></code></pre></td></tr></table></figure>

<p>有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 <code>any</code> 类型来标记这些变量：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">notSure</span>: <span class="hljs-built_in">any</span> = <span class="hljs-number">4</span><br>notSure = <span class="hljs-string">&#x27;maybe a string&#x27;</span><br>notSure = <span class="hljs-literal">false</span> <span class="hljs-comment">// 也可以是个 boolean</span><br></code></pre></td></tr></table></figure>

<p>在对现有代码进行改写的时候，<code>any</code> 类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。并且当你只知道一部分数据的类型时，<code>any</code> 类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">list</span>: <span class="hljs-built_in">any</span>[] = [<span class="hljs-number">1</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&#x27;free&#x27;</span>]<br><br>list[<span class="hljs-number">1</span>] = <span class="hljs-number">100</span><br></code></pre></td></tr></table></figure>

<h4 id="void"><a href="#void" class="headerlink" title="void"></a>void</h4><p>某种程度上来说，<code>void</code> 类型像是与 <code>any</code> 类型相反，它<code>表示没有任何类型</code>。 当一个函数没有返回值时，你通常会见到其返回值类型是 <code>void</code>：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">/* 表示没有任何类型, 一般用来说明函数的返回值不能是undefined和null之外的值 */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">fn</span>(<span class="hljs-params"></span>): <span class="hljs-built_in">void</span> &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;fn()&#x27;</span>)<br>  <span class="hljs-comment">// return undefined</span><br>  <span class="hljs-comment">// return null</span><br>  <span class="hljs-comment">// return 1 // error</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>声明一个 <code>void</code> 类型的变量没有什么大用，因为你只能为它赋予 <code>undefined</code> 和 <code>null</code>：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> <span class="hljs-attr">unusable</span>: <span class="hljs-built_in">void</span> = <span class="hljs-literal">undefined</span><br></code></pre></td></tr></table></figure>

<h4 id="object"><a href="#object" class="headerlink" title="object"></a>object</h4><p><code>object</code> 表示非原始类型，也就是除 <code>number</code>，<code>string</code>，<code>boolean</code>之外的类型。</p>
<p>使用 <code>object</code> 类型，就可以更好的表示像 <code>Object.create</code> 这样的 <code>API</code>。例如：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">fn2</span>(<span class="hljs-params">obj:<span class="hljs-built_in">object</span></span>):<span class="hljs-built_in">object</span> &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;fn2()&#x27;</span>, obj)<br>  <span class="hljs-keyword">return</span> &#123;&#125;<br>  <span class="hljs-comment">// return undefined</span><br>  <span class="hljs-comment">// return null</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">fn2</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">String</span>(<span class="hljs-string">&#x27;abc&#x27;</span>)))<br><span class="hljs-comment">// console.log(fn2(&#x27;abc&#x27;) // error</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">fn2</span>(<span class="hljs-title class_">String</span>))<br></code></pre></td></tr></table></figure>

<h4 id="联合类型"><a href="#联合类型" class="headerlink" title="联合类型"></a>联合类型</h4><p>联合类型（Union Types）表示取值可以为多种类型中的一种<br>需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">toString2</span>(<span class="hljs-params">x: <span class="hljs-built_in">number</span> | <span class="hljs-built_in">string</span></span>) : <span class="hljs-built_in">string</span> &#123;<br>  <span class="hljs-keyword">return</span> x.<span class="hljs-title function_">toString</span>()<br>&#125;<br></code></pre></td></tr></table></figure>

<p>需求2: 定义一个一个函数得到一个数字或字符串值的长度</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">getLength</span>(<span class="hljs-params">x: <span class="hljs-built_in">number</span> | <span class="hljs-built_in">string</span></span>) &#123;<br><br>  <span class="hljs-comment">// return x.length // error</span><br><br>  <span class="hljs-keyword">if</span> (x.<span class="hljs-property">length</span>) &#123; <span class="hljs-comment">// error</span><br>    <span class="hljs-keyword">return</span> x.<span class="hljs-property">length</span><br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-keyword">return</span> x.<span class="hljs-title function_">toString</span>().<span class="hljs-property">length</span><br>  &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="类型断言"><a href="#类型断言" class="headerlink" title="类型断言"></a>类型断言</h4><p>通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript 会假设你，程序员，已经进行了必须的检查。</p>
<p>类型断言有两种形式。 其一是“尖括号”语法, 另一个为 <code>as</code> 语法</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">类型断言(Type Assertion): 可以用来手动指定一个值的类型</span><br><span class="hljs-comment">语法:</span><br><span class="hljs-comment">    方式一: &lt;类型&gt;值</span><br><span class="hljs-comment">    方式二: 值 as 类型  tsx中只能用这种方式</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-comment">/* 需求: 定义一个函数得到一个字符串或者数值数据的长度 */</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">getLength</span>(<span class="hljs-params">x: <span class="hljs-built_in">number</span> | <span class="hljs-built_in">string</span></span>) &#123;<br>  <span class="hljs-keyword">if</span> ((&lt;<span class="hljs-built_in">string</span>&gt;x).<span class="hljs-property">length</span>) &#123;<br>    <span class="hljs-keyword">return</span> (x <span class="hljs-keyword">as</span> <span class="hljs-built_in">string</span>).<span class="hljs-property">length</span><br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-keyword">return</span> x.<span class="hljs-title function_">toString</span>().<span class="hljs-property">length</span><br>  &#125;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">getLength</span>(<span class="hljs-string">&#x27;abcd&#x27;</span>), <span class="hljs-title function_">getLength</span>(<span class="hljs-number">1234</span>))<br></code></pre></td></tr></table></figure>

<h4 id="类型推断"><a href="#类型推断" class="headerlink" title="类型推断"></a>类型推断</h4><p>类型推断: TS会在没有明确的指定类型的时候推测出一个类型<br>有下面2种情况: 1. 定义变量时赋值了, 推断为对应的类型. 2. 定义变量时没有赋值, 推断为any类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">/* 定义变量时赋值了, 推断为对应的类型 */</span><br><span class="hljs-keyword">let</span> b9 = <span class="hljs-number">123</span> <span class="hljs-comment">// number</span><br><span class="hljs-comment">// b9 = &#x27;abc&#x27; // error</span><br><br><span class="hljs-comment">/* 定义变量时没有赋值, 推断为any类型 */</span><br><span class="hljs-keyword">let</span> b10  <span class="hljs-comment">// any类型</span><br>b10 = <span class="hljs-number">123</span><br>b10 = <span class="hljs-string">&#x27;abc&#x27;</span><br></code></pre></td></tr></table></figure>

<h3 id="接口-1"><a href="#接口-1" class="headerlink" title="接口"></a>接口</h3><h4 id="简单用法"><a href="#简单用法" class="headerlink" title="简单用法"></a>简单用法</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;span&gt;次数:&#123;&#123;num&#125;&#125;&lt;/span&gt;&lt;br&gt;<br>    &lt;el-button @click=&quot;test&quot;&gt;点击&lt;/el-button&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>import &#123;defineComponent, reactive, ref&#125; from &#x27;vue&#x27;;<br><br>interface UserForm&#123;<br>  // 只读属性<br>  readonly name:string,<br>  age:number<br>&#125;<br><br>interface Alarm&#123;<br>  alert(): any;<br>&#125;<br><br>interface Light &#123;<br>  lightOn(): void;<br>  lightOff(): void;<br>&#125;<br><br>class Car implements Alarm &#123;<br>  alert() &#123;<br>    console.log(&#x27;Car alert&#x27;);<br>  &#125;<br>&#125;<br>export default defineComponent(&#123;<br>  name: &#x27;&#x27;,<br>  setup() &#123;<br>    let num=ref&lt;number&gt;(0);<br>    const test=()=&gt;&#123;<br>      num.value++;<br>      const car=new Car()<br>      car.alert();<br>    &#125;<br>    return &#123;<br>      test,<br>      num<br>    &#125;<br>  &#125;<br>&#125;)<br>&lt;/script&gt;<br>&lt;style scoped&gt;<br><br>&lt;/style&gt;<br></code></pre></td></tr></table></figure>

<h4 id="类实现接口"><a href="#类实现接口" class="headerlink" title="类实现接口"></a>类实现接口</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">类类型: 实现接口</span><br><span class="hljs-comment">1. 一个类可以实现多个接口</span><br><span class="hljs-comment">2. 一个接口可以继承多个接口</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-keyword">interface</span> <span class="hljs-title class_">Alarm</span> &#123;<br>  <span class="hljs-title function_">alert</span>(): <span class="hljs-built_in">any</span>;<br>&#125;<br><br><span class="hljs-keyword">interface</span> <span class="hljs-title class_">Light</span> &#123;<br>  <span class="hljs-title function_">lightOn</span>(): <span class="hljs-built_in">void</span>;<br>  <span class="hljs-title function_">lightOff</span>(): <span class="hljs-built_in">void</span>;<br>&#125;<br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Car</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">Alarm</span> &#123;<br>  <span class="hljs-title function_">alert</span>(<span class="hljs-params"></span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Car alert&#x27;</span>);<br>  &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="一个类实现多个接口"><a href="#一个类实现多个接口" class="headerlink" title="一个类实现多个接口"></a>一个类实现多个接口</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">Car2</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">Alarm</span>, <span class="hljs-title class_">Light</span> &#123;<br>  <span class="hljs-title function_">alert</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Car alert&#x27;</span>);<br>  &#125;<br>  <span class="hljs-title function_">lightOn</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Car light on&#x27;</span>);<br>  &#125;<br>  <span class="hljs-title function_">lightOff</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Car light off&#x27;</span>);<br>  &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="接口继承接口"><a href="#接口继承接口" class="headerlink" title="接口继承接口"></a>接口继承接口</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">LightableAlarm</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">Alarm</span>, <span class="hljs-title class_">Light</span> &#123;<br><br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="类-1"><a href="#类-1" class="headerlink" title="类"></a>类</h3><h4 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h4><p>当成员被标记成 <code>private</code> 时，它就不能在声明它的类的外部访问</p>
<p><code>protected</code> 修饰符与 <code>private</code> 修饰符的行为很相似，但有一点不同，<code>protected</code>成员在派生类中仍然可以访问</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">访问修饰符: 用来描述类内部的属性/方法的可访问性</span><br><span class="hljs-comment">  public: 默认值, 公开的外部也可以访问</span><br><span class="hljs-comment">  private: 只能类内部可以访问</span><br><span class="hljs-comment">  protected: 类内部和子类可以访问</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Animal</span> &#123;<br>  <span class="hljs-keyword">public</span> <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span><br><br>  <span class="hljs-keyword">public</span> <span class="hljs-title function_">constructor</span> (<span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>) &#123;<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name<br>  &#125;<br><br>  <span class="hljs-keyword">public</span> run (<span class="hljs-attr">distance</span>: <span class="hljs-built_in">number</span>=<span class="hljs-number">0</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`<span class="hljs-subst">$&#123;<span class="hljs-variable language_">this</span>.name&#125;</span> run <span class="hljs-subst">$&#123;distance&#125;</span>m`</span>)<br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Person</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Animal</span> &#123;<br>  <span class="hljs-keyword">private</span> <span class="hljs-attr">age</span>: <span class="hljs-built_in">number</span> = <span class="hljs-number">18</span><br>  <span class="hljs-keyword">protected</span> <span class="hljs-attr">sex</span>: <span class="hljs-built_in">string</span> = <span class="hljs-string">&#x27;男&#x27;</span><br><br>  run (<span class="hljs-attr">distance</span>: <span class="hljs-built_in">number</span>=<span class="hljs-number">5</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Person jumping...&#x27;</span>)<br>    <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">run</span>(distance)<br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Person</span> &#123;<br>  run (<span class="hljs-attr">distance</span>: <span class="hljs-built_in">number</span>=<span class="hljs-number">6</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Student jumping...&#x27;</span>)<br><br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">sex</span>) <span class="hljs-comment">// 子类能看到父类中受保护的成员</span><br>    <span class="hljs-comment">// console.log(this.age) //  子类看不到父类中私有的成员</span><br><br>    <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">run</span>(distance)<br>  &#125;<br>&#125;<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&#x27;abc&#x27;</span>).<span class="hljs-property">name</span>) <span class="hljs-comment">// 公开的可见</span><br><span class="hljs-comment">// console.log(new Person(&#x27;abc&#x27;).sex) // 受保护的不可见</span><br><span class="hljs-comment">// console.log(new Person(&#x27;abc&#x27;).age) //  私有的不可见</span><br></code></pre></td></tr></table></figure>

<h4 id="静态属性"><a href="#静态属性" class="headerlink" title="静态属性"></a>静态属性</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">静态属性, 是类对象的属性</span><br><span class="hljs-comment">非静态属性, 是类的实例对象的属性</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Person</span> &#123;<br>  <span class="hljs-attr">name1</span>: <span class="hljs-built_in">string</span> = <span class="hljs-string">&#x27;A&#x27;</span><br>  <span class="hljs-keyword">static</span> <span class="hljs-attr">name2</span>: <span class="hljs-built_in">string</span> = <span class="hljs-string">&#x27;B&#x27;</span><br>&#125;<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Person</span>.<span class="hljs-property">name2</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>().<span class="hljs-property">name1</span>)<br></code></pre></td></tr></table></figure>

<h4 id="抽象类"><a href="#抽象类" class="headerlink" title="抽象类"></a>抽象类</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">抽象类</span><br><span class="hljs-comment">  不能创建实例对象, 只有实现类才能创建实例</span><br><span class="hljs-comment">  可以包含未实现的抽象方法</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-keyword">abstract</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Animal</span> &#123;<br><br>  <span class="hljs-keyword">abstract</span> cry ()<br><br>  run () &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;run()&#x27;</span>)<br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">Dog</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Animal</span> &#123;<br>  cry () &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27; Dog cry()&#x27;</span>)<br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">const</span> dog = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Dog</span>()<br>dog.<span class="hljs-title function_">cry</span>()<br>dog.<span class="hljs-title function_">run</span>()<br></code></pre></td></tr></table></figure>

<h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><h4 id="函数类型"><a href="#函数类型" class="headerlink" title="函数类型"></a>函数类型</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">x: <span class="hljs-built_in">number</span>, y: <span class="hljs-built_in">number</span></span>): <span class="hljs-built_in">number</span> &#123;<br>  <span class="hljs-keyword">return</span> x + y<br>&#125;<br><br><span class="hljs-keyword">let</span> myAdd = <span class="hljs-keyword">function</span>(<span class="hljs-params">x: <span class="hljs-built_in">number</span>, y: <span class="hljs-built_in">number</span></span>): <span class="hljs-built_in">number</span> &#123; <br>  <span class="hljs-keyword">return</span> x + y<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="可选参数和默认参数"><a href="#可选参数和默认参数" class="headerlink" title="可选参数和默认参数"></a>可选参数和默认参数</h4><blockquote>
<p>JavaScript 里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是 <code>undefined</code>。<br> 在TypeScript 里我们可以在参数名旁使用 <code>?</code> 实现可选参数的功能。 比如，我们想让 <code>lastName</code> 是可选的</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">buildName</span>(<span class="hljs-params">firstName: <span class="hljs-built_in">string</span>=<span class="hljs-string">&#x27;A&#x27;</span>, lastName?: <span class="hljs-built_in">string</span></span>): <span class="hljs-built_in">string</span> &#123;<br>  <span class="hljs-keyword">if</span> (lastName) &#123;<br>    <span class="hljs-keyword">return</span> firstName + <span class="hljs-string">&#x27;-&#x27;</span> + lastName<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-keyword">return</span> firstName<br>  &#125;<br>&#125;<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">buildName</span>(<span class="hljs-string">&#x27;C&#x27;</span>, <span class="hljs-string">&#x27;D&#x27;</span>))<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">buildName</span>(<span class="hljs-string">&#x27;C&#x27;</span>))<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">buildName</span>())<br></code></pre></td></tr></table></figure>

<h4 id="函数重载"><a href="#函数重载" class="headerlink" title="函数重载"></a>函数重载</h4><blockquote>
<p><code>typeof</code>判断参数的类型</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">函数重载: 函数名相同, 而形参不同的多个函数</span><br><span class="hljs-comment">需求: 我们有一个add函数，它可以接收2个string类型的参数进行拼接，也可以接收2个number类型的参数进行相加 </span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-comment">// 重载函数声明</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span> (<span class="hljs-attr">x</span>: <span class="hljs-built_in">string</span>, <span class="hljs-attr">y</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">string</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span> (<span class="hljs-attr">x</span>: <span class="hljs-built_in">number</span>, <span class="hljs-attr">y</span>: <span class="hljs-built_in">number</span>): <span class="hljs-built_in">number</span><br><br><span class="hljs-comment">// 定义函数实现</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">x: <span class="hljs-built_in">string</span> | <span class="hljs-built_in">number</span>, y: <span class="hljs-built_in">string</span> | <span class="hljs-built_in">number</span></span>): <span class="hljs-built_in">string</span> | <span class="hljs-built_in">number</span> &#123;<br>  <span class="hljs-comment">// 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 x + y</span><br>  <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> x === <span class="hljs-string">&#x27;string&#x27;</span> &amp;&amp; <span class="hljs-keyword">typeof</span> y === <span class="hljs-string">&#x27;string&#x27;</span>) &#123;<br>    <span class="hljs-keyword">return</span> x + y<br>  &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> x === <span class="hljs-string">&#x27;number&#x27;</span> &amp;&amp; <span class="hljs-keyword">typeof</span> y === <span class="hljs-string">&#x27;number&#x27;</span>) &#123;<br>    <span class="hljs-keyword">return</span> x + y<br>  &#125;<br>&#125;<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">add</span>(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>))<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">add</span>(<span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-string">&#x27;b&#x27;</span>))<br><span class="hljs-comment">// console.log(add(1, &#x27;a&#x27;)) // error</span><br></code></pre></td></tr></table></figure>

<h3 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h3><blockquote>
<p>基本使用</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">createArray</span>(<span class="hljs-params">value: <span class="hljs-built_in">any</span>, count: <span class="hljs-built_in">number</span></span>): <span class="hljs-built_in">any</span>[] &#123;<br>  <span class="hljs-keyword">const</span> <span class="hljs-attr">arr</span>: <span class="hljs-built_in">any</span>[] = []<br>  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> index = <span class="hljs-number">0</span>; index &lt; count; index++) &#123;<br>    arr.<span class="hljs-title function_">push</span>(value)<br>  &#125;<br>  <span class="hljs-keyword">return</span> arr<br>&#125;<br><br><span class="hljs-keyword">const</span> arr1 = <span class="hljs-title function_">createArray</span>(<span class="hljs-number">11</span>, <span class="hljs-number">3</span>)<br><span class="hljs-keyword">const</span> arr2 = <span class="hljs-title function_">createArray</span>(<span class="hljs-string">&#x27;aa&#x27;</span>, <span class="hljs-number">3</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr1[<span class="hljs-number">0</span>].<span class="hljs-title function_">toFixed</span>(), arr2[<span class="hljs-number">0</span>].<span class="hljs-title function_">split</span>(<span class="hljs-string">&#x27;&#x27;</span>))<br></code></pre></td></tr></table></figure>

<h4 id="函数泛型"><a href="#函数泛型" class="headerlink" title="函数泛型"></a>函数泛型</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">function</span> createArray2 &lt;T&gt; (<span class="hljs-attr">value</span>: T, <span class="hljs-attr">count</span>: <span class="hljs-built_in">number</span>) &#123;<br>  <span class="hljs-keyword">const</span> <span class="hljs-attr">arr</span>: <span class="hljs-title class_">Array</span>&lt;T&gt; = []<br>  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> index = <span class="hljs-number">0</span>; index &lt; count; index++) &#123;<br>    arr.<span class="hljs-title function_">push</span>(value)<br>  &#125;<br>  <span class="hljs-keyword">return</span> arr<br>&#125;<br><span class="hljs-keyword">const</span> arr3 = createArray2&lt;<span class="hljs-built_in">number</span>&gt;(<span class="hljs-number">11</span>, <span class="hljs-number">3</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr3[<span class="hljs-number">0</span>].<span class="hljs-title function_">toFixed</span>())<br><span class="hljs-comment">// console.log(arr3[0].split(&#x27;&#x27;)) // error</span><br><span class="hljs-keyword">const</span> arr4 = createArray2&lt;<span class="hljs-built_in">string</span>&gt;(<span class="hljs-string">&#x27;aa&#x27;</span>, <span class="hljs-number">3</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr4[<span class="hljs-number">0</span>].<span class="hljs-title function_">split</span>(<span class="hljs-string">&#x27;&#x27;</span>))<br><span class="hljs-comment">// console.log(arr4[0].toFixed()) // error</span><br></code></pre></td></tr></table></figure>

<h4 id="多个泛型参数的函数"><a href="#多个泛型参数的函数" class="headerlink" title="多个泛型参数的函数"></a>多个泛型参数的函数</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">function</span> swap &lt;K, V&gt; (<span class="hljs-attr">a</span>: K, <span class="hljs-attr">b</span>: V): [K, V] &#123;<br>  <span class="hljs-keyword">return</span> [a, b]<br>&#125;<br><span class="hljs-keyword">const</span> result = swap&lt;<span class="hljs-built_in">string</span>, <span class="hljs-built_in">number</span>&gt;(<span class="hljs-string">&#x27;abc&#x27;</span>, <span class="hljs-number">123</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result[<span class="hljs-number">0</span>].<span class="hljs-property">length</span>, result[<span class="hljs-number">1</span>].<span class="hljs-title function_">toFixed</span>())<br></code></pre></td></tr></table></figure>

<h4 id="泛型接口"><a href="#泛型接口" class="headerlink" title="泛型接口"></a>泛型接口</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">IbaseCRUD</span> &lt;T&gt; &#123;<br>  <span class="hljs-attr">data</span>: T[]<br>  <span class="hljs-attr">add</span>: <span class="hljs-function">(<span class="hljs-params">t: T</span>) =&gt;</span> <span class="hljs-built_in">void</span><br>  <span class="hljs-attr">getById</span>: <span class="hljs-function">(<span class="hljs-params">id: <span class="hljs-built_in">number</span></span>) =&gt;</span> T<br>&#125;<br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">User</span> &#123;<br>  id?: <span class="hljs-built_in">number</span>; <span class="hljs-comment">//id主键自增</span><br>  <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>; <span class="hljs-comment">//姓名</span><br>  <span class="hljs-attr">age</span>: <span class="hljs-built_in">number</span>; <span class="hljs-comment">//年龄</span><br><br>  <span class="hljs-title function_">constructor</span> (name, age) &#123;<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age<br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">UserCRUD</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">IbaseCRUD</span> &lt;<span class="hljs-title class_">User</span>&gt; &#123;<br>  <span class="hljs-attr">data</span>: <span class="hljs-title class_">User</span>[] = []<br>  <br>  <span class="hljs-title function_">add</span>(<span class="hljs-attr">user</span>: <span class="hljs-title class_">User</span>): <span class="hljs-built_in">void</span> &#123;<br>    user = &#123;...user, <span class="hljs-attr">id</span>: <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>()&#125;<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-title function_">push</span>(user)<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;保存user&#x27;</span>, user.<span class="hljs-property">id</span>)<br>  &#125;<br><br>  <span class="hljs-title function_">getById</span>(<span class="hljs-attr">id</span>: <span class="hljs-built_in">number</span>): <span class="hljs-title class_">User</span> &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-title function_">find</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.<span class="hljs-property">id</span>===id)<br>  &#125;<br>&#125;<br><br><br><span class="hljs-keyword">const</span> userCRUD = <span class="hljs-keyword">new</span> <span class="hljs-title class_">UserCRUD</span>()<br>userCRUD.<span class="hljs-title function_">add</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>(<span class="hljs-string">&#x27;tom&#x27;</span>, <span class="hljs-number">12</span>))<br>userCRUD.<span class="hljs-title function_">add</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>(<span class="hljs-string">&#x27;tom2&#x27;</span>, <span class="hljs-number">13</span>))<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(userCRUD.<span class="hljs-property">data</span>)<br></code></pre></td></tr></table></figure>

<h4 id="泛型类"><a href="#泛型类" class="headerlink" title="泛型类"></a>泛型类</h4><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">GenericNumber</span>&lt;T&gt; &#123;<br>  <span class="hljs-attr">zeroValue</span>: T<br>  <span class="hljs-attr">add</span>: <span class="hljs-function">(<span class="hljs-params">x: T, y: T</span>) =&gt;</span> T<br>&#125;<br><br><span class="hljs-keyword">let</span> myGenericNumber = <span class="hljs-keyword">new</span> <span class="hljs-title class_">GenericNumber</span>&lt;<span class="hljs-built_in">number</span>&gt;()<br>myGenericNumber.<span class="hljs-property">zeroValue</span> = <span class="hljs-number">0</span><br>myGenericNumber.<span class="hljs-property">add</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">x, y</span>) &#123;<br>  <span class="hljs-keyword">return</span> x + y <br>&#125;<br><br><span class="hljs-keyword">let</span> myGenericString = <span class="hljs-keyword">new</span> <span class="hljs-title class_">GenericNumber</span>&lt;<span class="hljs-built_in">string</span>&gt;()<br>myGenericString.<span class="hljs-property">zeroValue</span> = <span class="hljs-string">&#x27;abc&#x27;</span><br>myGenericString.<span class="hljs-property">add</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">x, y</span>) &#123; <br>  <span class="hljs-keyword">return</span> x + y<br>&#125;<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(myGenericString.<span class="hljs-title function_">add</span>(myGenericString.<span class="hljs-property">zeroValue</span>, <span class="hljs-string">&#x27;test&#x27;</span>))<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(myGenericNumber.<span class="hljs-title function_">add</span>(myGenericNumber.<span class="hljs-property">zeroValue</span>, <span class="hljs-number">12</span>))<br></code></pre></td></tr></table></figure>

<h4 id="泛型约束"><a href="#泛型约束" class="headerlink" title="泛型约束"></a>泛型约束</h4><p>如果我们直接对一个泛型参数取 <code>length</code> 属性, 会报错, 因为这个泛型根本就不知道它有这个属性</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 没有泛型约束</span><br><span class="hljs-keyword">function</span> fn &lt;T&gt;(<span class="hljs-attr">x</span>: T): <span class="hljs-built_in">void</span> &#123;<br>  <span class="hljs-comment">// console.log(x.length)  // error</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>我们可以使用泛型约束来实现</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">Lengthwise</span> &#123;<br>  <span class="hljs-attr">length</span>: <span class="hljs-built_in">number</span>;<br>&#125;<br><br><span class="hljs-comment">// 指定泛型约束</span><br><span class="hljs-keyword">function</span> fn2 &lt;T <span class="hljs-keyword">extends</span> <span class="hljs-title class_">Lengthwise</span>&gt;(<span class="hljs-attr">x</span>: T): <span class="hljs-built_in">void</span> &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(x.<span class="hljs-property">length</span>)<br>&#125;<br></code></pre></td></tr></table></figure>

<p>我们需要传入符合约束类型的值，必须包含必须 <code>length</code> 属性：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-title function_">fn2</span>(<span class="hljs-string">&#x27;abc&#x27;</span>)<br><span class="hljs-comment">// fn2(123) // error  number没有length属性</span><br></code></pre></td></tr></table></figure>

<h2 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm install vuex --save-dev<br></code></pre></td></tr></table></figure>

<blockquote>
<p>store&#x2F;index.ts</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123; createStore &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">createStore</span>(&#123;<br>  <span class="hljs-attr">state</span>: &#123;<br>  &#125;,<br>  <span class="hljs-attr">getters</span>: &#123;<br>  &#125;,<br>  <span class="hljs-attr">mutations</span>: &#123;<br>  &#125;,<br>  <span class="hljs-attr">actions</span>: &#123;<br>  &#125;,<br>  <span class="hljs-attr">modules</span>: &#123;<br>  &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<blockquote>
<p>main.ts</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./App.vue&#x27;</span><br><span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>(<span class="hljs-title class_">App</span>)<br><br>app.<span class="hljs-title function_">use</span>(store)<br>app.<span class="hljs-title function_">mount</span>(<span class="hljs-string">&#x27;#app&#x27;</span>)<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在vue3中，vuex提供了一个<code>useStore</code>方法来获取全局的store<br>没有什么比直接看<a target="_blank" rel="noopener" href="https://vuex.vuejs.org/zh/">官网</a>更清楚了</p>
</blockquote>
<h3 id="访问-State-和-Getter"><a href="#访问-State-和-Getter" class="headerlink" title="访问 State 和 Getter"></a>访问 State 和 Getter</h3><blockquote>
<p>为了访问 state 和 getter，需要创建 <code>computed</code> 引用以保留响应性，这与在选项式 API 中创建计算属性等效。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123;createStore&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">createStore</span>(&#123;<br>    <span class="hljs-attr">state</span>: &#123;<br>        <span class="hljs-attr">count</span>:<span class="hljs-number">0</span>,<br>    &#125;,<br>    <span class="hljs-attr">getters</span>: &#123;<br>        <span class="hljs-title function_">double</span>(<span class="hljs-params">state</span>)&#123;<br>            <span class="hljs-keyword">return</span> state.<span class="hljs-property">count</span>;<br>        &#125;<br>    &#125;,<br>    <span class="hljs-attr">mutations</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">actions</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">modules</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">plugins</span>:[<br>    ]<br>&#125;)<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;el-button type=&quot;info&quot; icon=&quot;Message&quot; circle @click=&quot;testGreeter&quot;/&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>import &#123;defineComponent, reactive, ref, computed&#125; from &#x27;vue&#x27;;<br>import &#123;useStore&#125; from &quot;vuex&quot;;<br><br>export default defineComponent(&#123;<br>  setup() &#123;<br>    const store = useStore();<br>    let count = computed(() =&gt; &#123;<br>      return store.state.count;<br>    &#125;)<br><br>    let double = computed(() =&gt; &#123;<br>      return store.getters.double;<br>    &#125;)<br><br>    function testGreeter() &#123;<br>      console.log(&quot;count的值:&quot;,count.value);<br>      console.log(&quot;double的值:&quot;,double.value);<br>    &#125;<br><br><br>    return &#123;<br>      testGreeter,<br>    &#125;<br>  &#125;<br>&#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>官网采用以下写法</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>import &#123;defineComponent, reactive, ref, computed&#125; from &#x27;vue&#x27;;<br>import &#123;useStore&#125; from &quot;vuex&quot;;<br><br>export default defineComponent(&#123;<br>  setup() &#123;<br>    const store = useStore();<br><br>    return &#123;<br>      count: computed(() =&gt; store.state.count),<br>      double: computed(() =&gt; store.getters.double)<br>    &#125;<br>  &#125;<br>&#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>



<h3 id="访问-Mutation-和-Action"><a href="#访问-Mutation-和-Action" class="headerlink" title="访问 Mutation 和 Action"></a>访问 Mutation 和 Action</h3><blockquote>
<p>要使用 mutation 和 action 时，只需要在 <code>setup</code> 钩子函数中调用 <code>commit</code> 和 <code>dispatch</code> 函数</p>
<p><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_45934504/article/details/123462736">参考博客</a></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123;createStore&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span><br><span class="hljs-keyword">import</span> createPersistedstate  <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex-persistedstate&#x27;</span><br><span class="hljs-keyword">import</span> user <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./modules/user&#x27;</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">createStore</span>(&#123;<br>    <span class="hljs-attr">state</span>: &#123;<br>        <span class="hljs-attr">count</span>:<span class="hljs-number">0</span>,<br>    &#125;,<br>    <span class="hljs-attr">getters</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">mutations</span>: &#123;<br>        sum (state, num) &#123;<br>            state.<span class="hljs-property">count</span> += num<br>        &#125;<br>    &#125;,<br>    <span class="hljs-attr">actions</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">modules</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">plugins</span>:[<br>    ]<br>&#125;)<br><br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;el-button type=&quot;info&quot; icon=&quot;Message&quot; circle @click=&quot;testVuex(10)&quot;/&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>import &#123;defineComponent, reactive, ref, computed&#125; from &#x27;vue&#x27;;<br>import &#123;useStore&#125; from &quot;vuex&quot;;<br><br>export default defineComponent(&#123;<br>  setup() &#123;<br>    const store = useStore();<br><br>    const testVuex=(num)=&gt;&#123;<br>      // 使用 store.commit(&#x27;mution中函数名&#x27;, &#x27;需要传递的参数&#x27; ) 在commit里添加参数的方式进行传递<br>      store.commit(&#x27;sum&#x27;, num)<br>      console.log(store.state.count);<br>    &#125;<br>    return &#123;<br>      testVuex,<br>    &#125;<br>  &#125;<br>&#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>也可以采用以下方式</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123;createStore&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span><br><span class="hljs-keyword">import</span> createPersistedstate  <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex-persistedstate&#x27;</span><br><span class="hljs-keyword">import</span> user <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./modules/user&#x27;</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">createStore</span>(&#123;<br>    <span class="hljs-attr">state</span>: &#123;<br>        <span class="hljs-attr">count</span>:<span class="hljs-number">0</span>,<br>    &#125;,<br>    <span class="hljs-attr">getters</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">mutations</span>: &#123;<br>        sum (state, payload) &#123;<br>            state.<span class="hljs-property">count</span> += payload.<span class="hljs-property">num</span><br>        &#125;<br>    &#125;,<br>    <span class="hljs-attr">actions</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">modules</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">plugins</span>:[<br>    ]<br>&#125;)<br><br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;el-button type=&quot;info&quot; icon=&quot;Message&quot; circle @click=&quot;testVuex(10)&quot;/&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>import &#123;defineComponent, reactive, ref, computed&#125; from &#x27;vue&#x27;;<br>import &#123;useStore&#125; from &quot;vuex&quot;;<br><br>export default defineComponent(&#123;<br>  setup() &#123;<br>    const store = useStore();<br><br>    const testVuex=(num)=&gt;&#123;<br>      // 前面提到了 mution 主要包含 type 和 回调函数 两部分, 和通过commit payload的方式进行参数传递（提交）,下面我们可以用这种方式进行 mution 的提交<br>      store.commit(&#123;<br>        type: &#x27;sum&#x27;,  // 类型就是mution中定义的方法名称<br>        num<br>      &#125;)<br>      console.log(store.state.count);<br>    &#125;<br>    return &#123;<br>      testVuex,<br>    &#125;<br>  &#125;<br>&#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p><strong><code>actions</code></strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123;createStore&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span><br><span class="hljs-keyword">import</span> createPersistedstate  <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex-persistedstate&#x27;</span><br><span class="hljs-keyword">import</span> user <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./modules/user&#x27;</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">createStore</span>(&#123;<br>    <span class="hljs-attr">state</span>: &#123;<br>        <span class="hljs-attr">count</span>:<span class="hljs-number">0</span>,<br>    &#125;,<br>    <span class="hljs-attr">getters</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">mutations</span>: &#123;<br>        sum (state, num) &#123;<br>            state.<span class="hljs-property">count</span> += num<br>        &#125;<br>    &#125;,<br>    <span class="hljs-attr">actions</span>: &#123;<br>        <span class="hljs-comment">// context 上下文对象，可以理解为store</span><br>        sum_actions (context, num) &#123;<br>            <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>                context.<span class="hljs-title function_">commit</span>(<span class="hljs-string">&#x27;sum&#x27;</span>, num)  <span class="hljs-comment">// 通过context去触发mutions中的sum</span><br>            &#125;, <span class="hljs-number">1000</span>)<br>        &#125;<br>    &#125;,<br>    <span class="hljs-attr">modules</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">plugins</span>:[<br>    ]<br>&#125;)<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;el-button type=&quot;info&quot; icon=&quot;Message&quot; circle @click=&quot;testVuex(10)&quot;/&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>import &#123;defineComponent, reactive, ref, computed&#125; from &#x27;vue&#x27;;<br>import &#123;useStore&#125; from &quot;vuex&quot;;<br><br>export default defineComponent(&#123;<br>  setup() &#123;<br>    const store = useStore();<br><br>    const testVuex=(num)=&gt;&#123;<br>      store.dispatch(&#x27;sum_actions&#x27;, num)<br>      console.log(store.state.count);<br>    &#125;<br>    return &#123;<br>      testVuex,<br>    &#125;<br>  &#125;<br>&#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>通过 promise 实现异步操作完成，通知组件异步执行成功或是失败。</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123;createStore&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span><br><span class="hljs-keyword">import</span> createPersistedstate <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex-persistedstate&#x27;</span><br><span class="hljs-keyword">import</span> user <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./modules/user&#x27;</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">createStore</span>(&#123;<br>    <span class="hljs-attr">state</span>: &#123;<br>        <span class="hljs-attr">count</span>: <span class="hljs-number">0</span>,<br>    &#125;,<br>    <span class="hljs-attr">getters</span>: &#123;<br>    &#125;,<br>    <span class="hljs-attr">mutations</span>: &#123;<br>        <span class="hljs-title function_">sum</span>(<span class="hljs-params">state, num</span>) &#123;<br>            state.<span class="hljs-property">count</span> += num<br>        &#125;<br>    &#125;,<br>    <span class="hljs-attr">actions</span>: &#123;<br>        <span class="hljs-title function_">sum_actions</span>(<span class="hljs-params">context, payload</span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>                <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>                    <span class="hljs-comment">// 通过 context 上下文对象拿到 count</span><br>                    <span class="hljs-keyword">if</span> (context.<span class="hljs-property">state</span>.<span class="hljs-property">count</span> &lt; <span class="hljs-number">30</span>) &#123;<br>                        context.<span class="hljs-title function_">commit</span>(<span class="hljs-string">&#x27;sum&#x27;</span>, payload.<span class="hljs-property">num</span>)<br>                        <span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;异步操作执行成功&#x27;</span>)<br>                    &#125; <span class="hljs-keyword">else</span> &#123;<br>                        <span class="hljs-title function_">reject</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">&#x27;异步操作执行错误&#x27;</span>))<br>                    &#125;<br>                &#125;, <span class="hljs-number">1000</span>)<br>            &#125;)<br>        &#125;<br>    &#125;,<br>    <span class="hljs-attr">modules</span>: &#123;&#125;,<br>    <span class="hljs-attr">plugins</span>: [<br>    ]<br>&#125;)<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;el-button type=&quot;info&quot; icon=&quot;Message&quot; circle @click=&quot;testVuex(10)&quot;/&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>import &#123;defineComponent, reactive, ref, computed&#125; from &#x27;vue&#x27;;<br>import &#123;useStore&#125; from &quot;vuex&quot;;<br><br>export default defineComponent(&#123;<br>  setup() &#123;<br>    const store = useStore();<br><br>    const testVuex=(num)=&gt;&#123;<br>      store.dispatch(&#x27;sum_actions&#x27;, &#123;<br>        num<br>      &#125;).then((res) =&gt; &#123;<br>        console.log(&quot;success:&quot;,res)<br>      &#125;).catch((err) =&gt; &#123;<br>        console.log(err)<br>      &#125;)<br>    &#125;<br>    return &#123;<br>      testVuex,<br>    &#125;<br>  &#125;<br>&#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p><strong><code>getters</code></strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123;createStore&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span><br><span class="hljs-keyword">import</span> createPersistedstate <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex-persistedstate&#x27;</span><br><span class="hljs-keyword">import</span> user <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./modules/user&#x27;</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">createStore</span>(&#123;<br>    <span class="hljs-attr">state</span>: &#123;<br>        <span class="hljs-attr">users</span>: [&#123;<br>            <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;小美&quot;</span>,<br>            <span class="hljs-attr">age</span>: <span class="hljs-number">12</span><br>        &#125;, &#123;<br>            <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;小红&quot;</span>,<br>            <span class="hljs-attr">age</span>: <span class="hljs-number">22</span><br>        &#125;, &#123;<br>            <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;小明&quot;</span>,<br>            <span class="hljs-attr">age</span>: <span class="hljs-number">23</span><br>        &#125;]<br>    &#125;,<br>    <span class="hljs-attr">getters</span>: &#123;<br>        <span class="hljs-title function_">filterUsersByAge</span>(<span class="hljs-params">state</span>) &#123;<br>            <span class="hljs-keyword">return</span> state.<span class="hljs-property">users</span>.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.<span class="hljs-property">age</span> &gt;= <span class="hljs-number">20</span>)<br>        &#125;<br>    &#125;,<br>    <span class="hljs-attr">mutations</span>: &#123;&#125;,<br>    <span class="hljs-attr">actions</span>: &#123;&#125;,<br>    <span class="hljs-attr">modules</span>: &#123;&#125;,<br>    <span class="hljs-attr">plugins</span>: [<br>    ]<br>&#125;)<br><br></code></pre></td></tr></table></figure>



<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;el-button type=&quot;info&quot; icon=&quot;Message&quot; circle @click=&quot;testVuex(10)&quot;/&gt;<br>    &lt;br&gt;<br>    &lt;ul&gt;<br>      &lt;li&gt;&#123;&#123; store.getters.filterUsersByAge &#125;&#125;&lt;/li&gt;<br>    &lt;/ul&gt;<br>    &lt;hr&gt;<br>    &lt;ul&gt;<br>      &lt;li v-for=&quot;item in store.getters.filterUsersByAge&quot;&gt;&#123;&#123; item &#125;&#125;&lt;/li&gt;<br>    &lt;/ul&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br>&lt;script lang=&quot;ts&quot;&gt;<br>import &#123;defineComponent, reactive, ref, computed&#125; from &#x27;vue&#x27;;<br>import &#123;useStore&#125; from &quot;vuex&quot;;<br><br>export default defineComponent(&#123;<br>  setup() &#123;<br>    const store = useStore();<br><br>    const testVuex = (num) =&gt; &#123;<br>    &#125;<br>    return &#123;<br>      testVuex,<br>      store<br>    &#125;<br>  &#125;<br>&#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p><strong>modules</strong></p>
<blockquote>
<p>user.js</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;<br>    <span class="hljs-attr">namespaced</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 为每个模块添加一个前缀名，保证模块命明不冲突</span><br>    <span class="hljs-comment">// state中存放的就是全局共享的数据</span><br>    <span class="hljs-comment">// sessionStorage.getItem(&#x27;userState&#x27;)?JSON.parse(sessionStorage.getItem(&#x27;userState&#x27;))</span><br>    <span class="hljs-attr">state</span>: <span class="hljs-literal">null</span> != <span class="hljs-variable language_">window</span>.<span class="hljs-property">sessionStorage</span>.<span class="hljs-title function_">getItem</span>(<span class="hljs-string">&#x27;state&#x27;</span>) ? <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(sessionStorage.<span class="hljs-title function_">getItem</span>(<span class="hljs-string">&#x27;state&#x27;</span>)) : &#123;<br>        <span class="hljs-attr">user</span>: &#123;<br>            <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;&quot;</span>,<br>            <span class="hljs-attr">age</span>: <span class="hljs-literal">null</span>,<br>            <span class="hljs-attr">gender</span>: <span class="hljs-string">&quot;&quot;</span><br>        &#125;<br>    &#125;,<br><br>    <span class="hljs-comment">// 取值的方法，计算属性</span><br>    <span class="hljs-attr">getters</span>: &#123;<br>        <span class="hljs-title function_">getUser</span>(<span class="hljs-params">state</span>) &#123;<br>            <span class="hljs-keyword">return</span> state.<span class="hljs-property">user</span>;<br>        &#125;<br>    &#125;,<br>    <span class="hljs-comment">// 可以修改state值的方法，同步阻塞</span><br>    <span class="hljs-attr">mutations</span>: &#123;<br>        <span class="hljs-comment">// 传入user对象，更新全局的user</span><br>        <span class="hljs-title function_">updateUser</span>(<span class="hljs-params">state, user</span>) &#123;<br>            state.<span class="hljs-property">user</span> = user;<br>        &#125;<br>    &#125;,<br><br>    <span class="hljs-comment">// 异步调用mutations方法</span><br>    <span class="hljs-attr">actions</span>: &#123;<br>        <span class="hljs-title function_">asyncUpdateUser</span>(<span class="hljs-params">context, user</span>) &#123;<br>            context.<span class="hljs-title function_">commit</span>(<span class="hljs-string">&#x27;updateUser&#x27;</span>, user);<br>        &#125;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>


                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/vue3/" class="category-chain-item">vue3</a>
  
  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/tags/vue3/">#vue3</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>vue3 &amp; typescript学习</div>
      <div>http://example.com/2023/04/30/编程语言/Vue/Vue3/Vue3+Typescript/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>深海火锅店</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2023年4月30日</div>
        </div>
      
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2023/05/25/%E7%B3%BB%E7%BB%9F%E9%85%8D%E7%BD%AE/%E7%BC%96%E7%A8%8B%E9%85%8D%E7%BD%AE/apifox%E4%BD%BF%E7%94%A8/apifox%E4%BD%BF%E7%94%A8/" title="apifox使用">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">apifox使用</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2023/04/30/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/Vue/Vue3/Vue3%E9%80%9F%E6%88%90/" title="vue3快速上手">
                        <span class="hidden-mobile">vue3快速上手</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="busuanzi_container_site_pv" style="display: none">
        总访问量 
        <span id="busuanzi_value_site_pv"></span>
         次
      </span>
    
    
      <span id="busuanzi_container_site_uv" style="display: none">
        总访客数 
        <span id="busuanzi_value_site_uv"></span>
         人
      </span>
    
    
  
</div>

  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>

  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  
<script src="//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js"></script>



<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
